<template>

<nav>

  <!-- searchTop star-->
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      input-align="center"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>

  <!-- navTop -->
  <div class="navTop">
    <div class="navTop-item">推荐</div>
    <div class="navTop-item-main">618大促</div>
    <div class="navTop-item">食品</div>
    <div class="navTop-item">服饰</div>
    <div class="navTop-item">电器</div>
    <div class="navTop-item">数码</div>
  </div>

</nav>

  <!-- navIconArea -->
  <home-serve-item-list></home-serve-item-list>

  <!-- goodsArea -->
  <goods-card></goods-card>

</template>

<style>
html{
  background-color: #F4F4F4;
}

/* nav start */
nav{
  position: fixed;
  top: 0;
  width: 100%;
}
.navTop {
  padding: 10px;
  background-color: #FFF;
  display: flex;
  justify-content: space-around;
  font-size: 22px;
}
/* 618 */
.navTop-item-main {
  font-size: 24px; 
  color: #F83C10;
  font-weight: 700;
  letter-spacing: 1.5px;
}

</style>

<script>

import { ref } from 'vue';
import { showToast } from 'vant';
import GoodsCard from '@/components/GoodsCard.vue';
import HomeServeItemList from '@/components/HomeServeItemList.vue';

export default {
  
  components: {
    GoodsCard,
    HomeServeItemList,
  },

  // search
  setup() {
    const value = ref('');
    const onSearch = (val) => showToast(val);
    const onCancel = () => showToast('取消');
    return {
      value,
      onSearch,
      onCancel,
    };
  },
   
};
  
</script>


